<%@ include file="/WEB-INF/template/include.jsp"%>

<openmrs:require privilege="Manage Data Logging Event" otherwise="/login.htm" redirect="/module/datalogging/eventList.list" />

<%@ include file="/WEB-INF/template/header.jsp"%>
<%@ include file="localHeader.jsp" %>

<openmrs:htmlInclude file="/moduleResources/datalogging/scripts/jquery/jquery-1.4.2.min.js" />
<openmrs:htmlInclude file="/moduleResources/datalogging/scripts/jquery-ui/js/jquery-ui-1.8.2.custom.min.js" />
<openmrs:htmlInclude file="/moduleResources/datalogging/scripts/jquery-ui/css/redmond/jquery-ui-1.8.2.custom.css" />

<style>
	.ui-autocomplete {
		max-height: 100px;
		max-width: 500px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
	* html .ui-autocomplete {
		height: 100px;
		max-width: 500px;
	}
</style>


<script type="text/javascript">

	var $j = jQuery.noConflict();
	
	var eventDatatypes = new Array();
	eventDatatypes.push("encounter");
	eventDatatypes.push("obs");
	eventDatatypes.push("logic");

	function changeDatatype(obj) {
		for (var i=0; i < eventDatatypes.length; i++) {
			var row = document.getElementById(eventDatatypes[i] + "FilterRow");
			var selectedText = obj[obj.selectedIndex].text.toLowerCase(); 
			if (selectedText.indexOf(eventDatatypes[i]) != -1)
				row.style.display = "";
			else
				row.style.display = "none";
		}
	}

	function split(val) {
		if (jQuery.trim(val) === "")
			return new Array();
		return val.split(/,\s*/);
	}
	
	function extractLast(term) {
		return split(term).pop();
	}

	function valueExists(id, idList) {
		var ids = split(idList);
		for (i = 0; i < ids.length; i++)
			if (ids[i] == id)
				return true;
		return false;
	}

	$j(document).ready(function() {
		
		changeDatatype(document.getElementById('eventType'));

		var searchType;
		var searchUrl;
		
		$j(".search").autocomplete({
			search: function(event, ui) {
				searchType = $j(this).attr("searchType");
				searchUrl = $j(this).attr("searchUrl");
			},
			source: function(request, response) {
				jQuery.ajax({
					url: searchUrl,
					dataType: "json",
					data: {
						filterName: searchType,
						searchTerm: extractLast(request.term)
					},
					success: function(data) {
						response(jQuery.map(data.elements, function(item) {
							return {
								label: item.name + (item.description ? " (" + item.description + ")" : " (No Description)"),
								value: item.name + "^" + item.id
							}
						}));
					}
				});
			},
			minLength: 0,
			focus: function() {
				// prevent value inserted on focus
				return false;
			},
			select: function(event, ui) {

				var value = ui.item.value;
				var name = jQuery.trim(value.substring(0, value.indexOf("^")));
				var id = jQuery.trim(value.substring(value.indexOf("^") + 1));

				var list = document.getElementById(searchType + "List");
				var idList = document.getElementById(searchType + "IdList");

				if (!valueExists(id, idList.value)) {

					// for concept filter, we only allow one concept in the concept filter
					// so we need to clean up the concept part
					if (searchType == "concept") {
						list.length = 0;
						idList.value = "";
					}

					var option = new Option(name, id);
					option.selected = true;
					list.options[list.options.length] = option;
					
					var terms = split(idList.value);
					terms[terms.length] = id;
					idList.value = terms.join(",");
				}
				
				this.value = "";
				
				return false;
			}
		});
	})
	
</script>

<h2><spring:message code="datalogging.title" /></h2>

<div id="summarylist">
	<b class="boxHeader">
		<spring:message code="datalogging.event.title" />
	</b>
	<form method="post">
		<div class="box">
			<table id="eventTable" cellpadding="2" cellspacing="0">
				<tr>
					<th><spring:message code="general.id"/></th>
					<td>${event.eventId}</td>
				</tr>
				<tr>
					<th><spring:message code="general.name"/></th>
					<spring:bind path="event.name">
						<td><input type="text" name="${status.expression}" value="${status.value}" size="43" /></td>
						<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
					</spring:bind>
				</tr>
				<tr>
					<th valign="top"><spring:message code="general.description"/></th>
					<spring:bind path="event.description">
						<td><textarea name="${status.expression}" cols="40" rows="3">${status.value}</textarea></td>
						<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
					</spring:bind>
				</tr>
				<tr>
					<th><spring:message code="datalogging.event.type" /></th>
					<td>
						<spring:bind path="event.eventType">
							<select id="eventType" name="${status.expression}" onChange="changeDatatype(this);">
								<c:forEach var="event" items="${events}" varStatus="varStatus">
									<option value="${event}" <c:if test="${status.value == event}">selected='true'</c:if> >
										${event.value}
									</option>
								</c:forEach>
							</select>
						</spring:bind>
					</td>
				</tr>
				<tr>
					<th valign="top"><spring:message code="datalogging.event.filter"/></th>
					<td>
						<table>
							<tr id="encounterFilterRow">
								<td>
									<table>
										<tr>
											<th>Location</th>
											<td>
												<select id="locationList" class="largeWidth" size="6" id="location" multiple="multiple">
													<c:forEach items="${location}" var="loc">
														<option value="${loc.locationId}">${loc.name}</option>
													</c:forEach>
												</select>
											</td>
										</tr>
										<tr>
											<th>&nbsp;</th>
											<td>
												<spring:bind path="event.location">
													<input type="hidden" id="locationIdList" name="${status.expression}" value="${status.value}" />
													<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
												</spring:bind>
												<input type="text" class="search" searchUrl="filterFinder.form" searchType="location" size="43" />
											</td>
										</tr>
										<tr>
											<th>Encounter Type</th>
											<td>
												<select id="encounterTypeList" class="largeWidth" size="6" multiple="multiple">
													<c:forEach items="${encounterType}" var="encType">
														<option value="${encType.encounterTypeId}">${encType.name}</option>
													</c:forEach>
												</select>
											</td>
										</tr>
										<tr>
											<th>&nbsp;</th>
											<td>
												<spring:bind path="event.encounterType">
													<input type="hidden" id="encounterTypeIdList" name="${status.expression}" value="${status.value}" />
													<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
												</spring:bind>
												<input type="text" class="search" searchUrl="filterFinder.form" searchType="encounterType" size="43" />
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr id="obsFilterRow">
								<td>
									<table>
										<tr>
											<th>Concept</th>
											<td>
												<select id="conceptList" class="largeWidth" size="6" id="concept" multiple="multiple">
													<c:forEach items="${concept}" var="c">
														<option value="${c.conceptId}">${c.name}</option>
													</c:forEach>
												</select>
											</td>
										</tr>
										<tr>
											<th>&nbsp;</th>
											<td>
												<spring:bind path="event.concept">
													<input type="hidden" id="conceptIdList" name="${status.expression}" value="${status.value}" />
													<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
												</spring:bind>
												<input type="text" class="search" searchUrl="filterFinder.form" searchType="concept" size="43" />
											</td>
										</tr>
										<tr>
											<th>Value Coded</th>
											<td>
												<select id="valueCodedList" class="largeWidth" size="6" id="concept" multiple="multiple">
													<c:forEach items="${valueCoded}" var="coded">
														<option value="${coded.conceptId}">${coded.name}</option>
													</c:forEach>
												</select>
											</td>
										</tr>
										<tr>
											<th>&nbsp;</th>
											<td>
												<spring:bind path="event.valueCoded">
													<input type="hidden" id="valueCodedIdList" name="${status.expression}" value="${status.value}" />
													<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
												</spring:bind>
												<input type="text" class="search" searchUrl="filterFinder.form" searchType="valueCoded" size="43" />
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr id="logicFilterRow">
								<td>
									<table>
										<tr>
											<th>Logic</th>
											<td>
												<select id="logicList" class="largeWidth" size="6" id="concept" multiple="multiple">
													<c:forEach items="${logic}" var="logicToken">
														<option value="${logicToken}">${logicToken}</option>
													</c:forEach>
												</select>
											</td>
										</tr>
										<tr>
											<th>&nbsp;</th>
											<td>
												<spring:bind path="event.logic">
													<input type="hidden" id="logicIdList" name="${status.expression}" value="${status.value}" />
													<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
												</spring:bind>
												<input type="text" class="search" searchUrl="logicFinder.form" searchType="logic" size="43" />
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<th><spring:message code="datalogging.event.active" /></th>
					<spring:bind path="event.active">
						<td>
							<input type="hidden" name="_${status.expression}">
							<input type="checkbox" name="${status.expression}" id="${status.expression}" value="true" readonly="readonly" />
							<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
						</td>
					</spring:bind>
				</tr>
				<tr>
					<th><spring:message code="datalogging.variable.title" /></th>
					<td>
						<select id="variableList" class="largeWidth" size="6" id="concept" multiple="multiple">
							<c:forEach items="${variables}" var="variable">
								<option value="${variable.variableId}">${variable.name}</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<th>&nbsp;</th>
					<td>
						<spring:bind path="event.variable">
							<input type="hidden" id="variableIdList" name="${status.expression}" value="${status.value}" />
							<c:if test="${status.errorMessage != ''}"><span class="error">${status.errorMessage}</span></c:if>
						</spring:bind>
						<input type="text" class="search" searchUrl="variableFinder.form" searchType="variable" size="43" />
					</td>
				</tr>
			</table>
		<br />
		<input type="submit" value='<spring:message code="datalogging.event.save"/>'>
		</div>
	</form>
</div>

<%@ include file="/WEB-INF/template/footer.jsp"%>
